<template>
  <div id="search-box">
    <form action="/">
      <van-search
        v-model="value"
        show-action
        placeholder="请输入你想要的商品"
        @search="onSearch"
        background="#eee"
      />
    </form>
  </div>
</template>

<script>
import Vue from 'vue';
import { Search } from 'vant';
import 'vant/lib/search/style'

Vue.use(Search);

export default {
  name:"SearchBox",
  data() {
    return {
      value:''
    }
  },
   methods: {
    onSearch() {
      this.$http({
        url:"/api/public/v1/goods/search",
        methods:"get",
        params:{
          query:this.value,
          pagesize:10,
          pagenum:1
        }
      }).then(res=>{
        console.log(res);
      }).catch(err=>{
        console.log(err);
      })
      var arrstr = localStorage.getItem('historyData')
      var arr=JSON.parse(arrstr)
      arr.push(this.value)
      arr=[...new Set(arr)]
      localStorage.setItem('historyData',JSON.stringify(arr))
      this.$emit('historyChange',this.value)
      this.value=''
      
    },
  },
}
</script>

<style scoped>

</style>